<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="layui-col-xs12">
    <div class="layui-col-xs10 layui-col-xs-offset1">
        <!-- 新增试卷 -->
        <div class="layui-col-xs12" style="margin-top: 4%;">
            <button type="button" class="layui-btn" onclick="add()">新增试卷</button>
            <!--<button type="button" class="layui-btn" onclick="add2()">新增题库</button>-->
        </div>
        <!-- 试卷列表 -->
        <div class="layui-col-xs12">
            <!-- 试卷列表 -->
            <div class="layui-col-xs12" style="height: 510px;overflow: auto;">
                <div class="layui-form">
                    <table class="layui-table">
                        <colgroup>
                            <col width="200">
                            <col width="100">
                            <col width="100">
                            <col width="150">
                            <col width="130">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>试卷名称</th>
                            <th>试卷类型</th>
                            <th>试卷总分</th>
                            <th>创建时间</th>
                            <th>所属课程ID</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="paper : ${papers}">
                            <td><a th:href="@{'paper/info?id=' + ${paper.id}}" th:text="${paper.name}"></a></td>
                            <td th:switch="${paper.type}">
                                <span th:case="0">考试</span>
                                <span th:case="1">考察</span>
                            </td>
                            <td th:text="${paper.score}"></td>
                            <td th:text="${paper.createTime}"></td>
                            <td><a th:href="@{'info/' + ${paper.courseId}}" th:text="${paper.courseId}"></a></td>
                            <td>
                                <button type="button" class="layui-btn layui-btn-warm"
                                        th:onclick="update([[${paper.id}]], [[${paper.name}]], [[${paper.type}]], [[${paper.courseId}]], [[${paper.score}]])">
                                    修改
                                </button>
                                <button type="button" class="layui-btn"
                                        th:onclick="window.location.href = 'paper/edit?id=[[${paper.id}]]'">编辑
                                </button>
                                <a type="button" class="layui-btn"
                                   th:href="@{'deletePage?id=' + ${paper.id}}">删除
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 分页 -->
            <div class="layui-col-xs4 layui-col-xs-offset4">
                <button th:onclick="changePageUp([[${page}]])" type="button"
                        class="layui-btn" th:classappend="${page > 1} ? '' : 'layui-btn-disabled'">上一页
                </button>
                <span th:text="${page}"></span>
                <button th:onclick="changePageDown([[${page}]],[[${count}]])" type="button"
                        class="layui-btn" th:classappend="${page < count} ? '' : 'layui-btn-disabled'">下一页
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<div id="addpaper" style="display: none;">
    <form class="layui-form layui-col-xs11" style="margin-top: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">试卷名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学校名称</label>
            <div class="layui-input-block">
                <input type="text" id="school" placeholder="请输入学校名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">试卷类型</label>
            <div class="layui-input-block">
                <select id="type">
                    <option value="1">考察</option>
                    <option value="0">考试</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试形式</label>
            <div class="layui-input-block">
                <input type="radio" id="form" name="form" value="闭卷" title="闭卷" class="layui-radio" checked="checked">
                <input type="radio" id="form" name="form" value="开卷" title="开卷" class="layui-radio">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试院系</label>
            <div class="layui-input-block">
                <input type="text" id="department" placeholder="请输入考试院系" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试班级</label>
            <div class="layui-input-block">
                <input type="text" id="clazz" placeholder="请输入考试班级" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属课程</label>
            <div class="layui-input-block">
                <select id="courseId">
                    <option th:each="course : ${courses}" th:value="${course.id}" th:text="${course.name}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">试卷分数</label>
            <div class="layui-input-block">
                <input type="text" id="score" class="layui-input">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">

    //上一页
    function changePageUp(page) {
        if (page > 1) {
            page -= 1;
            window.location.href = 'paper?page=' + page + '&limit=9';
        } else {
            alert("当前页已经是第一页");
        }

    }

    //下一页
    function changePageDown(page, count) {
        if (page < count) {
            page += 1;
            window.location.href = 'paper?page=' + page + '&limit=9';
        } else {
            alert("当前页已经是最后一页");
        }

    }

    layui.use('form', function () {
        var form = layui.form;
    })

    function add() {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
            form.render('select');
            var info = layer.open({
                type: 1,
                title: '新增试卷',
                shadeClose: true,
                shade: false,
                btn: ['新增'],
                yes: function () {
                    var name = $("#name").val();
                    var type = $("#type").val();
                    var score = $("#score").val();
                    var courseId = $("#courseId").val();
                    var school = $("#school").val();
                    var form = $("#form").val();
                    var department = $("#department").val();
                    var clazz = $("#clazz").val();
                    var n = Number(score);
                    if (!isNaN(n)) {
                        layer.close(info)
                        var load = layer.load(1);
                        //添加
                        $.post('paper/add', {
                            name: name,
                            type: type,
                            score: score,
                            courseId: courseId,
                            school: school,
                            type: type,
                            form: form,
                            department: department,
                            clazz: clazz
                        }, function (res) {
                            if (res.code == '00000') {
                                layer.close(load);
                                reset()
                                layer.msg('添加成功', {icon: 1});
                                setTimeout(function () {
                                    location.reload();
                                }, 2000);
                            } else {
                                layer.alert(res.message)
                            }
                        }, 'json')
                    } else {
                        alert("分数不是数字，请重新输入")
                    }
                },
                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '450px'],
                content: $("#addpaper")
            });
        })
    }
    function update(id, name, type, courseId, score) {
        $("#name").val(name);
        $("#type").val(type);
        $("#score").val(score);
        $("#courseId").val(courseId);
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
            form.render('select');
            var info = layer.open({
                type: 1,
                title: '修改试卷',
                shadeClose: true,
                shade: false,
                btn: ['修改'],
                yes: function () {
                    var nname = $("#name").val();
                    var ntype = $("#type").val();
                    var nscore = $("#score").val();
                    var ncourseId = $("#courseId").val();
                    if (name == nname && type == ntype && nscore == score && courseId == ncourseId) {
                        layer.msg('修改成功', {icon: 1});
                    } else {
                        $.post('paper/update', {
                            id: id,
                            name: nname,
                            type: ntype,
                            score: nscore,
                            courseId: ncourseId
                        }, function (res) {
                            if (res.code == '00000') {
                                layer.msg('修改成功', {icon: 1});
                                setTimeout(function () {
                                    location.reload();
                                }, 2000);
                            } else {
                                layer.msg(res.message, {icon: 2});
                                reset();
                                layer.close(info);
                            }
                        }, 'json');
                    }
                },
                cancel: function (index, layero) {
                    reset();
                },
                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '450px'],
                content: $("#addpaper")
            });
        });
    }

    function reset() {
        $("#name").val("");
        $("#type").val("");
        $("#score").val("");
        $("#courseId").val("");
    }
</script>
</html>